<template>
	<view class="content">
		<!-- 轮播图 -->
		<uni-search-bar @confirm="doSearch" @input="" v-model="searchkey" />
		<div class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%;height: 100%;">
				<swiper-item v-for="(item,index) in selectionList" :key="index">
					<view class="swiper-item">
						<img :src="item.img" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</div>
		<!-- 实时天气 -->
		<view class="weather"
			style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.svg'"
					mode=""></image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>
		<uni-notice-bar show-icon scrollable
					text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		<button type="default" @tap="showme">我在哪里？</button>
		<!-- 分类 -->
		<!-- <view class="log" style="color: #ff6700;padding: 5rpx;font-size: 15px;">分类</view> -->
		<uni-section class="mb-10" title="分类" type="line"></uni-section>

		<div style="display: flex;justify-content: center;">
			<uni-grid :show-border="false" :column="4" @change="changeGrid">
				<uni-grid-item v-for="(item,index) in gridData" :index="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons :type="item.icon" :size="30" color="#fe0067" /><br>
						<span class="text">{{item.title}}</span>
					</view>
				</uni-grid-item>
			</uni-grid>
		</div>
	</view>


	<!-- 列表 -->
	<view class="shangluo">
		<!-- 一个列表项 -->
		<view class="item" v-for="(item,index) in seneryDate" :key="index">
			<!-- 图片 -->
			<view class="pic">
				<image :src="item.img" mode="" style="border-radius: 10px;"></image>
			</view>
			<!-- 右侧全部文本 -->
			<view class="text">
				<!-- 标题 -->
				<view class="title">{{item.name}}</view>
				<!-- 描述文本 -->
				<view class="msg">
					{{item.content}}
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG,
		headers1
	} from '../../utils/config';

	import {
		userStore
	} from "../../store/userStore";
	let store = userStore()
	onLoad(() => {
		getImagesList()
		getWeather()
		// getPos()
	})

	let weatherNow = ref({})
	let selectionList = ref({})

	async function getImagesList() {
		let res = await uni.$get(CONFIG.leanbase + "/1.1/classes/lunbo")
		console.log(res)
		selectionList.value = res.results
	}

	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_locition
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}
	// 分类
	let gridData = [{
			title: '公交地铁',
			icon: 'map'

		},
		{
			title: '天气',
			icon: 'star-filled'
		},
		{
			title: '热映电影',
			icon: 'videocam'
		},
		{
			title: '小组分工',
			icon: 'calendar'
		}
	]

	function changeGrid(e) {
		//点击的序号
		let index = e.detail.index
		// 根据不同的需要进行相应的跳转
		switch (index) {
			case 0:
			uni.navigateTo({
				url: '/pages/trafficMap/trafficMap'
			})
				break;
			case 1:
				uni.navigateTo({
					url: '/pages/weather/weather'
				})
				break;
			case 2:
			uni.navigateTo({
				url:'/pages/movie/movie'
			})
				break;
			case 3:
				uni.navigateTo({
					url: '/pages/details/details'
				})
				break;
		}
	}

	// 列表

	const seneryDate = ref([{
			name: '金丝峡',
			img: "../../static/images/jinsixia.jpg",
			content: "金丝峡景区，被誉为“天下奇峡”是国家5A级旅游景区。这里集峰、石、洞、林、禽、兽、泉、潭、瀑等自然景观于一体，风光秀丽，风格独特"
		},
		{
			name: '牛背梁',
			img: "../../static/images/niubeil.jpg",
			content: "牛背梁国家森林公园，坐落于陕西省商洛市柞水县，以其茂密的原始森林、清幽的潭溪瀑布、独特的峡谷风光而闻名”。"
		}, {
			name: '溶洞',
			img: "../../static/images/rongdong.jpg",
			content: "柞水溶洞景区，以溶洞和自然景色为主，被誉为“北国奇观”和“西北一绝”。景区内已发现的溶洞有115个，形态各异的钟乳石琳琅满目”。"
		},
		{
			name: '塔云山',
			img: "../../static/images/tayunshan.jpg",
			content: "塔云山景区以险绝、奇特、秀美、壮观、神异而著称，具有厚重久远的道教文化和绚丽多彩的自然风光”。"
		},
		{
			name: '月亮湾瀑布',
			img: "/static/images/yueliangwanpubu.jpg",
			content: "月亮湾大瀑布，利用跃进渠水资源，结合独特的丹霞地貌，形成了气势磅礴的瀑布景观”。"
		}
	])

	// 获取当前地点坐标
	// function getPos() {
	// 	uni.getLocation({
	// 		success(res) {
	// 			store.savePos(res.latitude, res.longitude)
	// 			console.log(res)
	// 		}
	// 	})
	// }


	function showme() {
		uni.navigateTo({
			url: "/pages/mywebView/mywebView?type=1"
		})
	}
</script>

<style lang="scss" scoped>
	.lunbo {
		width: 100%;
		height: 380rpx;
	}

	.grid-item-box {
		text-align: center;
	}

	.shangluo .item {
		width: 730rpx;
		height: 240rpx;
		border: 1px solid #ccc;
		border-radius: 10px;
		// box-shadow: 3px 3px 3px #ccc;
		margin: 6rpx;
		display: flex;
	}

	.shangluo .item .pic {
		width: 220rpx;
		height: 220rpx;
		padding: 10rpx;
	}

	.shangluo .item .pic image {
		width: 220rpx;
		height: 220rpx;
	}

	.shangluo .item .text {
		width: 480rpx;
	}

	.shangluo .item .title {
		text-align: center;
		color: red;
		font-weight: bold;
	}

	.shangluo .item .msg {
		/* border: 1px solid red; */
		text-wrap: wrap;
		height: 186rpx;
		font-size: 28rpx;
		// color: #666;
	}
</style>